<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />

  <form class="cil__base-block--form" [formGroup]="validateForm">
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INSTITUTION.CODE' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <app-aams-select
              level="institution"
              formControlName="acquirer"
              (ngModelChange)="handleChosenAcquirer($event)"
            ></app-aams-select>
            <nz-form-explain *ngIf="validateForm.get('acquirer').dirty && validateForm.get('acquirer').errors">
              <ng-container>{{'VALIDATION.REQUIRED_SELECT' | i18nParams: {name: 'GENERAL.BIZ_LEVEL.INSTITUTION'} }}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INSTITUTION.NAME' | i18n}}</nz-form-label>
          <nz-form-control>
            <input formControlName="acquirerName" name="acquirerName" nz-input/>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INSTITUTION.NAME_EN' | i18n}}</nz-form-label>
          <nz-form-control>
            <input formControlName="acquirerNameEN" name="acquirerNameEN" nz-input />
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.AGENT.CODE' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <app-aams-select
              level="agent"
              [insCode]="chosenAcquirer!.code"
              formControlName="group"
              (ngModelChange)="handleChosenGroup($event)"
            ></app-aams-select>
            <nz-form-explain *ngIf="validateForm.get('group').dirty && validateForm.get('group').errors">
              <ng-container>{{'VALIDATION.REQUIRED_SELECT' | i18nParams: {name: 'GENERAL.BIZ_LEVEL.AGENT'} }}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.AGENT.NAME' | i18n}}</nz-form-label>
          <nz-form-control>
            <input formControlName="groupName" name="groupName" nz-input />
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.AGENT.NAME_EN' | i18n}}</nz-form-label>
          <nz-form-control>
            <input formControlName="groupNameEN" name="groupNameEN" nz-input />
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.MERCHANT.NUM' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <app-aams-select
              level="merchant"
              formControlName="merchant"
              [insCode]="chosenAcquirer!.code"
              [agentCode]="chosenGroup!.code"
              (ngModelChange)="handleChosenMerchant($event)"
            ></app-aams-select>
            <nz-form-explain *ngIf="validateForm.get('merchant').dirty && validateForm.get('merchant').errors">
              <ng-container>{{'VALIDATION.REQUIRED_SELECT' | i18nParams: {name: 'GENERAL.BIZ_LEVEL.MERCHANT'} }}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.MERCHANT.NAME' | i18n}}</nz-form-label>
          <nz-form-control>
            <input formControlName="merchantName" name="merchantName" nz-input />
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.MERCHANT.NAME_EN' | i18n}}</nz-form-label>
          <nz-form-control>
            <input formControlName="merchantNameEN" name="merchantNameEN" nz-input />
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

  </form>
</div>
